import React from 'react';
import { Input, Modal, SwipeAction, Tabs, Toast } from 'antd-mobile';
import cookie from 'react-cookies';
import { PhoneFill } from 'antd-mobile-icons';
import { NavLink } from 'react-router-dom';

const Home = () => {

    const [keywords, setkeywords] = React.useState('')
    const [typelist, settypelist] = React.useState([])
    const [typeid, settypeid] = React.useState(0)
    const LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : ''
    const [list, setlist] = React.useState([])
    const ref = React.useRef()
    const [showLout, setshowLout] = React.useState(false)
    const [id, setid] = React.useState(0)

    let isMount = false
    React.useEffect(() => {
        async function typeData () {
            let result = await React.$api.contacttype()
            if (result.code == '1' && !isMount) {
                result.data.unshift({
                    id: 0,
                    name: '全部'
                })
                settypelist(result.data)
            }
        }
        typeData()
        search()
        return () => isMount = true
    }, [typeid])

    const onChangeType = (e) => {
        settypeid(e)
    }

    const search = async () => {
        let data = {
            typeid: typeid,
            userid: LoginUser.id,
            keywords: keywords
        }
        let result = await React.$api.contactindex(data)
        if (result.code == '1') {
            setlist(result.data)
        }
        // console.log('------')
        // console.log(keywords)
    }

    const callphone = (data) => {
        window.location.href = `tel: ${data}`
    }

    const del = (e) => {
        setid(e)
        setshowLout(true)
        ref.current?.close()
    }

    const onAction = async () => {
        setshowLout(false)
        let data = {
            id: id,
            userid: LoginUser.id
        }
        let result = await React.$api.contactdel(data)
        if (result.code == '1') {
            Toast.show({
                icon: 'success',
                content: result.msg,
            })
            search()
        } else {
            Toast.show({
                icon: 'fail',
                content: result.msg,
            })
            return false
        }
    }

    return (
        <>
            {/* 搜索 */}
            <div className='search'>
                <div className='box'>
                    <div className='icon'>
                        <span className='glyphicon glyphicon-search'></span>
                    </div>

                    <Input placeholder='请输入内容' className='input' value={keywords} onChange={(val) => setkeywords(val)} />

                    <button className='btn' size='mini' onClick={search} type='default'>搜索</button>
                </div>
            </div>

            {/* 分类 */}
            <div className='type wow fadeInUp'>
                <Tabs activeKey={typeid} onChange={onChangeType}>
                    {
                        typelist.map((item) => {
                            return (
                                <Tabs.Tab title={item.name} key={item.id}>
                                </Tabs.Tab>
                            )
                        })
                    }
                </Tabs>
            </div>

            {/* 列表 */}
            <div className='contact wow fadeInUp' data-wow-delay='100ms'>
                <div className='list'>
                    {
                        list.map((item, index) => {
                            return (
                                <SwipeAction
                                    key={index}
                                    ref={ref}
                                    rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',
                                            onClick: () => del(item.id),
                                        },
                                    ]}>
                                    <div className='item'>
                                        <div className='content'>
                                            <h3 className='title'>
                                                <NavLink to={`/contact/contact/index?typeids=` + item.id}>{item.nickname}</NavLink>
                                            </h3>

                                            <div className='info'>
                                                <div className='icon'>
                                                    <img src='/images/info.png' alt=''></img>
                                                </div>
                                                <div className='desc'>
                                                    {item.remark}
                                                </div>
                                            </div>
                                        </div>

                                        <div className='call icon'>
                                            <PhoneFill color='#00b578' fontSize={24} onClick={() => callphone(item.phone)} />
                                        </div>
                                    </div>
                                </SwipeAction>
                            )
                        })
                    }
                    {/* <div className='item'>
                        <div className='content'>
                            <h3 className='title'>
                                <a href='ContactAdd.html'>皇家进口酒庄</a>
                            </h3>

                            <div className='info'>
                                <div className='icon'>
                                    <img src='/images/info.png'></img>
                                </div>
                                <div className='desc'>
                                    备注的信息
                                </div>
                            </div>
                        </div>

                        <div className='call icon'>
                            <img src='/images/call.png'></img>
                        </div>
                    </div> */}
                </div>
            </div>

            <Modal
                className='baseindex'
                visible={showLout}
                content='是否确认删除'
                closeOnAction
                onAction={onAction}
                actions={[
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                    {
                        key: 'confirm',
                        text: '确认',
                    },
                ]}
            />
        </>
    )
}

export default Home;